<template>
  <div class="chat-bg">
    <div class="chat-container">
      <div class="chat-header">
        <button class="back-btn" @click="$router.push('/')" aria-label="返回首页">
          <svg width="22" height="22" viewBox="0 0 24 24"><path d="M15.5 19l-7-7 7-7" stroke="#888" stroke-width="2.2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>
        </button>
        <span>AI 超级智能体</span>
      </div>
      <div class="chat-body" ref="chatBodyRef">
        <div v-for="msg in messages" :key="msg.id" :class="['chat-message', msg.role]">
          <div v-if="msg.role === 'ai'" class="avatar-block">
            <img class="avatar" src="/ai-manus-avatar.png" alt="超级智能体" />
            <div class="name">超级智能体</div>
          </div>
          <div v-if="msg.role === 'user'" class="avatar-block user-avatar">
            <img class="avatar" src="/user-avatar.png" alt="我" />
            <div class="name">我</div>
          </div>
          <div class="bubble" :class="msg.role">{{ msg.content }}</div>
        </div>
        <div v-if="typing" class="chat-message ai">
          <div class="avatar-block">
            <img class="avatar" src="/ai-manus-avatar.png" alt="超级智能体" />
            <div class="name">超级智能体</div>
          </div>
          <div class="bubble ai">{{ typingContent === '' ? '...' : typingContent }}</div>
        </div>
      </div>
      <div class="chat-footer">
        <input v-model="input" @keyup.enter="sendMessage" placeholder="请输入你的消息..." />
        <button
          class="circle-btn send"
          @click="typing ? stopReply() : sendMessage()"
          :disabled="!typing && !input.trim()"
          aria-label="发送/结束"
        >
          <span v-if="typing" class="iconify" data-icon="mdi:stop-circle"></span>
          <span v-else class="iconify" data-icon="mdi:send"></span>
        </button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, nextTick } from 'vue'

const input = ref('')
const messages = ref([])
const typing = ref(false)
const typingContent = ref('')
const chatBodyRef = ref(null)

function scrollToBottom() {
  nextTick(() => {
    if (chatBodyRef.value) {
      chatBodyRef.value.scrollTop = chatBodyRef.value.scrollHeight
    }
  })
}

async function sendMessage() {
  if (!input.value.trim()) return
  const userMsg = { id: Date.now(), role: 'user', content: input.value }
  messages.value.push(userMsg)
  const msg = input.value
  input.value = ''
  typing.value = true
  typingContent.value = ''
  scrollToBottom()

  // 立即插入一条空AI消息
  const aiMsgObj = { id: Date.now() + 1, role: 'ai', content: '' }
  messages.value.push(aiMsgObj)
  const aiMsgIndex = messages.value.length - 1

  const response = await fetch(`http://localhost:9901/api/ai/manus/chat?message=${encodeURIComponent(msg)}`)
  const reader = response.body.getReader()
  const decoder = new TextDecoder('utf-8')
  while (true) {
    const { done, value } = await reader.read()
    if (done) break
    const chunk = decoder.decode(value, { stream: true })
    chunk.split('\n').forEach(line => {
      if (line.startsWith('data:')) {
        const data = line.replace(/^data:\s*/, '')
        if (data === '[END]') {
          typing.value = false
        } else {
          messages.value[aiMsgIndex].content += data + '\n'
        }
        scrollToBottom()
      }
    })
  }
  typing.value = false
  typingContent.value = ''
}

function stopReply() {
  typing.value = false;
  typingContent.value = '';
  // 这里可加终止SSE流的逻辑
}
</script>

<style scoped>
.chat-bg {
  min-height: 100vh;
  width: 100vw;
  background:
    linear-gradient(135deg, rgba(224,195,252,0.85) 0%, rgba(142,197,252,0.85) 100%),
    url('/bg-anime.jpg') center/cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: auto;
}
.chat-container {
  width: 100%;
  max-width: 700px;
  min-width: 320px;
  margin: 32px auto;
  border-radius: 22px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.13);
  background: rgba(255,255,255,0.78);
  display: flex;
  flex-direction: column;
  height: 85vh;
  min-height: 500px;
  transition: box-shadow 0.2s;
  backdrop-filter: blur(8px);
}
@media (max-width: 900px) {
  .chat-container {
    max-width: 98vw;
    min-width: 0;
    margin: 0 1vw;
    height: 95vh;
  }
}
@media (max-width: 600px) {
  .chat-bg {
    padding: 0;
  }
  .chat-container {
    margin: 0;
    border-radius: 0;
    min-height: 100vh;
    height: 100vh;
    box-shadow: none;
    padding: 0;
  }
}
.chat-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 24px;
  font-size: 1.5rem;
  font-weight: bold;
  border-bottom: 1px solid #eee;
  text-align: center;
  letter-spacing: 2px;
  color: #fff;
  background: linear-gradient(90deg, #43cea2 0%, #185a9d 100%);
  border-radius: 22px 22px 0 0;
  position: relative;
}
.back-btn {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  outline: none;
  display: flex;
  align-items: center;
  transition: background 0.2s;
  border-radius: 50%;
  width: 38px;
  height: 38px;
}
.back-btn:hover {
  background: rgba(180,180,180,0.12);
}
@media (max-width: 600px) {
  .back-btn {
    left: 8px;
    width: 32px;
    height: 32px;
  }
}
.chat-body {
  flex: 1;
  overflow-y: auto;
  padding: 32px 18px 16px 18px;
  background: #f7f8fa;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
@media (max-width: 600px) {
  .chat-body {
    padding: 18px 4px 8px 4px;
    gap: 10px;
  }
}
.chat-message {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  margin-bottom: 0;
}
.chat-message.user {
  flex-direction: row-reverse;
}
.avatar-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 44px;
}
.user-avatar {
  order: 2;
}
.avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #e0e0e0;
  object-fit: cover;
  border: 2px solid #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.name {
  font-size: 0.92rem;
  color: #888;
  margin-top: 2px;
  text-align: center;
}
.bubble {
  max-width: 70vw;
  min-width: 40px;
  padding: 15px 18px;
  border-radius: 18px;
  font-size: 1.08rem;
  word-break: break-word;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  transition: background 0.2s;
  line-height: 1.7;
  margin-bottom: 2px;
}
.bubble.user {
  background: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);
  color: #222;
  text-align: right;
}
.bubble.ai {
  background: #e0f7fa;
  color: #222;
  text-align: left;
}
.chat-footer {
  display: flex;
  padding: 20px 18px;
  border-top: 1px solid #eee;
  background: #fafbfc;
  border-radius: 0 0 22px 22px;
  gap: 10px;
}
@media (max-width: 600px) {
  .chat-footer {
    padding: 10px 4px;
    border-radius: 0;
  }
}
.chat-footer input {
  flex: 1;
  padding: 12px 16px;
  border-radius: 10px;
  border: 1.5px solid #ddd;
  font-size: 1.08rem;
  background: #f5f6fa;
  transition: border 0.2s;
}
.chat-footer input:focus {
  border: 1.5px solid #43cea2;
  outline: none;
}
.circle-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  margin-left: 8px;
  font-size: 1.5rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  transition: background 0.2s, transform 0.2s;
  cursor: pointer;
}
.circle-btn.send {
  background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
  color: #fff;
}
.circle-btn.stop {
  background: linear-gradient(135deg, #f857a6 0%, #ff5858 100%);
  color: #fff;
}
.circle-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.circle-btn .iconify {
  font-size: 1.5rem;
}
</style> 